<template>
  <el-form style="width: 300px">
    <el-form-item>
      收款人姓名：
      <el-input
        v-model="kai.realName"
        placeholder="收款人姓名"
        @blur="findName"
      ></el-input>
    </el-form-item>
    <el-form-item>
      收款人账号：
      <el-input
        v-model="kai.bankCards"
        placeholder="收款人账号"
        @blur="yzBankCards"
      ></el-input>
    </el-form-item>
    <el-form-item>
      收款人开户行：
      <el-select
        v-model="kai.tname"
        placeholder="选择开户行"
        @click="findTypes"
        @change="yzType"
        disabled
      >
        <el-option
          v-for="item in findTypess"
          :key="item.cid"
          :label="item.tname"
          :value="item.tname"
        />
      </el-select>
    </el-form-item>
    <el-form-item>
      选择付款账号：
      <el-select
        v-model="kai.bankCard"
        placeholder="选择付款账号"
        @click="findBankCards"
        @change="findBalances"
      >
        <el-option
          v-for="item in cards"
          :key="item.cid"
          :label="item.bankCard"
          :value="item.bankCard"
        />
      </el-select>
      <span style="color: red">余额：{{ balances }}</span>
    </el-form-item>
    <el-form-item>
      转账金额：
      <el-input
        v-model="kai.balance"
        placeholder="转账金额"
        @blur="yzBalance"
      ></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" :desabled="submits === 0" @click="submit">
        提交
      </el-button>
    </el-form-item>
    <!--    输入支付密码-->
    <el-dialog v-model="dialogVisible" title="提示：" style="width: 30%;">
      <span>
        <el-form>
          <el-form-item>
            <el-input v-model="password.bankCard"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="password.payPassword"
              placeholder="请输入支付密码"
              @blur="yzpasswords"
            ></el-input>
          </el-form-item>
        </el-form>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button
            type="primary"
            @click="zhuanzhangs"
            :disabled="button === 0"
          >
            确认转账
          </el-button>
        </div>
      </template>
    </el-dialog>
  </el-form>
</template>

<script setup>
import { ref, reactive } from 'vue'
import {
  findBalance,
  findBankCard,
  findNames,
  findType,
  yzBalances,
  yzBankCard,
  yzpassword,
  yzTypes,
  zhuanzhang,
} from '@/api/open'
import { ElMessage } from 'element-plus'
const kai = ref({
  balance: '',
})
const password = ref({
  payPassword: '',
  bankCard: '',
})
const button = ref(0)
const submits = ref(0)
const dialogVisible = ref(false)
const cards = ref([])
const findTypess = ref([])
const balances = ref()
const tnamess = ref()
const money = ref({
  chooseBalance: '',
  inputBalance: '',
})

function submit() {
  console.log(kai.value.backCard)
  kai.value.backCard = password.value.bankCard
  dialogVisible.value = true
}
function zhuanzhangs() {
  console.log('kai--------' + kai.value)
  zhuanzhang(kai.value).then(res => {
    console.log(res)
    dialogVisible.value = false
    ElMessage.success('转账成功')
  })
}

function findBankCards() {
  findBankCard(kai.value).then(res => {
    console.log(res.data)
    cards.value = res.data
  })
}
function findTypes() {
  findType().then(res => {
    console.log(res.data)
    findTypess.value = res.data
  })
}
function yzpasswords() {
  console.log(password.value)

  yzpassword(password.value).then(res => {
    if (res.data) {
      ElMessage.success('支付密码正确')
      button.value = 1
    } else {
      ElMessage.error('支付密码错误')
      button.value = 0
    }
  })
}
function findName() {
  findNames(kai.value.realName).then(res => {
    console.log(res.data)
    console.log(kai.value.realName)

    if (res.data) {
      ElMessage.success('ok')
    }
  })
}
function yzBankCards() {
  yzBankCard(kai.value).then(res => {
    console.log(res.data)
    if (res.data) {
      ElMessage.success('ok')
    } else {
      ElMessage.error('此人没有该银行卡')
    }
  })
  yzTypes(kai.value).then(res => {
    kai.value.tname = res.data
  })
}
function yzType() {
  console.log(kai.value.tname)
}
function findBalances() {
  console.log(kai.value.bankCard)
  password.value.bankCard = kai.value.bankCard

  findBalance(kai.value.bankCard).then(res => {
    console.log('res.data：' + res.data.er)
    console.log('res.data：' + res.data.yi)
    console.log('cid：' + kai.value.cid)

    balances.value = res.data.er
    tnamess.value = res.data.yi
  })
}
function yzBalance() {
  console.log(kai.value.balance)
  console.log(balances.value)

  money.value.chooseBalance = balances.value
  money.value.inputBalance = kai.value.balance

  console.log(money.value)

  if (kai.value.tname === tnamess.value) {
    ElMessage.success('ok')
  } else {
    yzBalances(money.value).then(res => {
      console.log(res.data)
      ElMessage.info(res.data.message)
      kai.value.balance = res.data.inputBalance
      console.log(kai.value.balance)
    })
  }

  // if(kai.value.balance>Number(balances.value)){
  //   ElMessage.error("余额不足")
  // }else if(kai.value.tname === tnamess.value){
  //   ElMessage.success("ok")
  // }else if(kai.value.balance>5000 && kai.value.balance<10000){
  //   ElMessage.info("异行转账5000-10000之间需要手续费")
  //   kai.value.balance=kai.value.balance+5
  //   console.log(kai.value.balance)
  // }else if(kai.value.balance>10000 && kai.value.balance<50000){
  //   ElMessage.info("异行转账10000-50000之间需要手续费")
  //   kai.value.balance=kai.value.balance+7.5
  // }else if(kai.value.balance>50000){
  //   ElMessage.info("异行转账大于50000需要手续费")
  //   kai.value.balance=kai.value.balance+7.5
  // }
}
</script>

<style scoped></style>
